<template>
  <el-card class="box-card baseTable">
    <el-table :data="d.tableData" style="width: 100%">
      <el-table-column prop="t1" label="知识" width="480">
        <template #default="scope">
          <div class="dflex">
            <div class="base-icon">
              <img :src="scope.row.t1.imageUrl" alt="" srcset="">
            </div>
            <div>
              <div @click="onPush(scope.row)" class="f14666">{{ scope.row.t1.baseName }}</div>
              <div class="f12999">{{ scope.row.t1.desc }}</div>
            </div>
          </div>


        </template>
      </el-table-column>
      <el-table-column prop="t2" label="文件" />
      <el-table-column prop="t3" label="尺寸" />
      <el-table-column prop="t4" label="机器人参考" />
      <el-table-column prop="t5" label="创建时间" />
      <el-table-column prop="t6" align="right" label="操作">
        <template #default="scope">
          <div class="dflex justify-content-end">
            <div class="base-edit" @click="onEdit(scope.row.t1)">
              <img :src="edit" alt="" srcset="">
            </div>
            <div class="base-del" @click="onDel(scope.row.t2)">
              <img :src="del" alt="" srcset="">
            </div>
          </div>


        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 知识库编辑 -->
  <BaseCread v-if="visible" type="edit" :editData="editData" @editDpData="editDpData" />
</template>

<script lang="ts" setup>
import { reactive, ref, provide } from 'vue'

import base_1 from "@/assets/docs/base_1.svg";
import del from "@/assets/docs/del.svg";
import edit from "@/assets/docs/edit.svg";
import BaseCread from '@/components/Create/components/baseCread.vue'
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import _ from 'lodash'

const router = useRouter();
const visible = ref(false)
const editData = ref({})

provide("visible", visible);

//
const editDpData = (e) => {
  console.log(e);
  ElMessage({
    type: 'success',
    message: JSON.stringify(e),
  })

}

//直接跳转
const onPush = (params: any) => {
  //带参数跳转
  router.push({ path: '/knowledgeBase/components/knowledgeDetails', query: params.t1 });
};

// mock
const d = reactive({
  tableData: [
    {
      t1: {
        imageUrl: base_1,
        desc: 'Tom',
        baseName: 'Tom',
      },
      t2: 1,
      t3: 'Tom',
      t4: 'Tom',
      t5: 'Tom',
      t6: 'Tom',
    },
    {
      t1: {
        imageUrl: base_1,
        desc: 'Tom',
        baseName: 'Tom',
      },
      t2: 2,
      t3: 'Tom',
      t4: 'Tom',
      t5: 'Tom',
      t6: 'Tom',
    },
    {
      t1: {
        imageUrl: base_1,
        desc: 'Tom',
        baseName: 'Tom',
      },
      t2: 3,
      t3: 'Tom',
      t4: 'Tom',
      t5: 'Tom',
      t6: 'Tom',
    },
  ]

})
const delFn = (p: number) => {
  let newList = d.tableData.filter(e => e.t2 !== p)
  d.tableData = newList

}

// 编辑
const onEdit = (e: any) => {
  const newData = _.cloneDeep(e)

  console.log(newData);
  editData.value = newData
  visible.value = true
}
// 删除
const onDel = (e: number) => {
  ElMessageBox.confirm(
    '相关记忆体将永久删除，请谨慎操作！是否继续删除？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      delFn(e)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

</script>
<style lang="scss" scoped>
.baseTable .base-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #F9E8E9;
  text-align: center;
  line-height: 55px;
  margin-right: 10px;
}

.base-edit {
  margin-right: 20px;
  cursor: pointer;
}

.f14666 {
  cursor: pointer;
}

.f14666 :hover {
  color: #C3181F;
}
</style>
